import styles from './auth.module.scss';

import {Button, Input} from "antd";
import ChatGPTIcon from "../../icons/chatgpt-1-active.svg";
import {useAccessStore} from "@/app/store/access";

export function Auth() {

    const access = useAccessStore();

    return (
        <div className={styles["auth-page"]}>
            <ChatGPTIcon/>

            <div className={styles["auth-title"]}>OpenAI ChatGPT</div>
            <div className={styles["auth-sub-title"]}>
                学习AI开发、掌握AI部署、运用AI提效
            </div>
            <img src={"/role/qrcode.png"} style={{width: 250}}/>

            <div className={styles["auth-tips"]}>
                扫码关注公众号【程序员】，
                <a
                    href="https://bugstack.cn/images/personal/qrcode.png"
                    target="_blank"
                >
                    回复【403】获取访问密码
                </a>
            </div>

            <Input className={styles["auth-input"]}
                   type="password"
                // placeholder={access.accessCode}
                   placeholder={"再次填写访问码"}
                // onChange={(e) => {
                //     access.updateCode(e.currentTarget.value);
                // }}
                   // status={access.accessCodeErrorMessage ? 'error' : ''}
            />

            <div className={styles["auth-actions"]}>
                <Button type="primary" onClick={() => access.login()}>确认登录👣</Button>
                <Button type="text">稍后再说</Button>
            </div>
        </div>
    )
}
